<template>
	<view class="list-box">
		<view @click="navTo(`/pages/message/list`)" class="center">
			<view class="tubo space-between">
				<view class="left row center">
					<image src="/static/pay/icon_31.png"></image>
					<text>消息</text>
				</view>

				<view class="right row">
					<view v-if="chat" class="yuandian"></view>
					<text class="iconfont icon-right"></text>
				</view>
			</view>
		</view>

		<view @click="navTo(`/pages/buy/list`)" class="center">
			<view class="tubo space-between">
				<view class="left row center">
					<image src="/static/pay/icon_32.png"></image>
					<text>购买记录</text>
				</view>
				<view class="right ">
					<text class="iconfont icon-right"></text>
				</view>
			</view>
		</view>

		<view  @click="navTo(`/pages/invite/info`)" class="center">
			<view class="tubo space-between">
				<view class="left row center">
					<image src="/static/pay/icon_33.png"></image>
					<text>邀请好友</text>
				</view>
				<view class="right ">
					<text class="iconfont icon-right"></text>
				</view>
			</view>
		</view>

		<view class="center"  >
			<view class="tubo space-between" style="all: initial !important; ">
				<view class="left center">

					<button class="but" plain='true' show-message-card='true' open-type="contact">
						<view class="row space-between center tianjia" >
							<view class="row center">
								<image src="/static/pay/icon_34.png"></image>
								<text class="lxkf">联系客服</text>
							</view>
							<view>
								<text class="iconfont icon-right ttta"></text>
							</view>
						</view>
					</button>
				</view>
				<!-- 	<view class="right ">
					<text  class="iconfont icon-right"></text>
				</view> -->
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		props: {
			chat: 0,
		},

		methods: {
			clickHandler(obj) {
				// console.log('obj', obj.page)
				if (obj.page) {
					// 点击后跳转到目标页面，并且会判断是否要求登录，没有登录进入登录页
					this.navTo(obj.page, {
						login: obj.login
					})
					return
				}

				if (obj.event) {
					//触发绑定的事件
					this.$emit(obj.event, obj)
				}

			}
		}
	}
</script>

<style lang="scss">
	page {

		// height: 100%;
		background-color: #F8F8F8;

	}

	.list-box {
		position: absolute;
		margin-top: -58rpx;
		// background-color: red;
		background-color: #FFFFFF;

		width: 750rpx;
		height: 700rpx;
		border-radius: 23px 23px 0px 0px;



		.tubo {
			position: relative;
			margin-top: 55rpx;
			width: 650rpx;
			padding-bottom: 50rpx;
			border-bottom: 1rpx solid #EEEEEE;

			.left {
				.but {
					border: 0;
					padding: 0 0 0 0 !important;
					width: 650rpx;
					// background-color: #F0AD4E;
					.tianjia{
						margin-top: 30rpx !important;
						padding-bottom: 30rpx !important;
						border-bottom: 1rpx solid #EEEEEE;
					}
					.iconfont {
					  font-family: "iconfont" !important;
					  font-size: 16px;
					  font-style: normal;
					  -webkit-font-smoothing: antialiased;
					  -moz-osx-font-smoothing: grayscale;
					}
					.ttta{
						margin-right: 0rpx !important;
						padding-right: 0rpx !important;
						// background-color: #655432;
						height: 150rpx !important;
						width: 150rpx !important;
						
					}
					
					.lxkf {
						height: 28rpx;
						font-size: 28rpx;
						font-family: Microsoft YaHei;
						font-weight: bold;
						color: #333333;
						line-height: 28rpx;
						text-align: center;
						// background-color: red;
					}


				}

				image {
					width: 34rpx;
					height: 34rpx;
					margin-right: 30rpx;
				}

				text {
					width: 120rpx;
					height: 34rpx;
					font-size: 28rpx;
					font-family: Microsoft YaHei;
					font-weight: bold;
					color: #333333;
					line-height: 34rpx;


				}
			}

			.right {
				.yuandian {
					width: 34rpx;
					height: 34rpx;
					line-height: 34rpx;
					border-radius: 50%;
					background-color: red;
					transform: scale(0.5, 0.5);

				}
			}

		}

	}
</style>
